<template>
  <Panel>
    <template #title>店铺管理</template>
    <template #content>
      <el-form
        :model="storeForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="店铺名称" prop="name">
          <el-input v-model="storeForm.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺公告" prop="bulletin">
          <el-input type="textarea" v-model="storeForm.bulletin"></el-input>
        </el-form-item>
        <el-form-item label="店铺头像">
          <el-upload
            class="avatar-uploader"
            action="http://127.0.0.1:5000/shop/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" alt="" />
            <img
              v-else-if="storeForm.avatar"
              :src="'http://127.0.0.1:5000/upload/shop/' + storeForm.avatar"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <!-- 多图片 -->
        <el-form-item label="店铺图片" prop="region">
          <el-upload
            class="imgArr"
            action="http://127.0.0.1:5000/shop/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :file-list="storeForm.pics"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="配送费" prop="deliveryPrice">
          <el-input v-model="storeForm.deliveryPrice"></el-input>
        </el-form-item>
        <el-form-item label="配送时间" prop="deliveryTime">
          <el-input v-model="storeForm.deliveryTime"></el-input>
        </el-form-item>
        <el-form-item label="配送描述" prop="description">
          <el-input v-model="storeForm.description"></el-input>
        </el-form-item>
        <el-form-item label="配送评分" prop="score">
          <el-input v-model="storeForm.score"></el-input>
        </el-form-item>
        <el-form-item label="销量" prop="sellCount">
          <el-input v-model="storeForm.sellCount"></el-input>
        </el-form-item>
        <el-form-item label="活动" prop="supports">
          <el-checkbox-group v-model="storeForm.supports">
            <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
            <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
            <el-checkbox label="单人精彩套餐" name="type"></el-checkbox>
            <el-checkbox label="特价饮品8折抢购" name="type"></el-checkbox>
            <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-picker
            is-range
            v-model="storeForm.date"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围"
          >
          </el-time-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >完成修改</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </template>
  </Panel>
</template>

<script>
import { shopInfo, totalData } from '@/api/shop'
export default {
  data() {
    return {
      imageUrl: '',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      storeForm: {
        supports: []
      },
      rules: {
        name: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        bulletin: [
          { required: true, message: '请输入公告', trigger: 'change' }
        ],
        supports: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动',
            trigger: 'change'
          }
        ],
        deliveryPrice: [
          { required: true, message: '请选择配送费', trigger: 'blur' }
        ],
        deliveryTime: [
          { required: true, message: '请填写送达时间', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请填写店铺描述', trigger: 'blur' }
        ],
        score: [{ required: true, message: '请填写评分', trigger: 'blur' }],
        sellCount: [{ required: true, message: '请填写销量', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getShopicfo()
  },

  methods: {
    /* 获取店铺信息 */
    async getShopicfo() {
      const { data } = await shopInfo()
      this.storeForm = data
      // 处理图片列表
      this.storeForm.pics = data.pics.map(item => {
        return {
          name: item,
          url: 'http://127.0.0.1:5000/upload/shop/' + item
        }
      })
    },
    /* 店铺头像 */
    handleAvatarSuccess(res, file) {
      if (res.code === 0) {
        this.storeForm.avatar = res.imgUrl
      }
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    /* 多图片 */
    handleRemove(file, fileList) {
      this.storeForm.pics = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    /* 多图片上传 */
    handleSuccess(res, file) {
      if (res.code === 0) {
        this.storeForm.pics.push({
          name: res.imgUrl,
          url: 'http://127.0.0.1:5000/upload/shop/' + res.imgUrl
        })
      }
    },
    submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          const store = { ...this.storeForm }
          store.date = JSON.stringify(store.date)
          store.supports = JSON.stringify(store.supports)
          store.pics = JSON.stringify(store.pics.map(item => item.name))
          await totalData(store)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.el-input {
  width: 260px;
}
.avatar-uploader/deep/ img {
  width: 120px;
  height: 120px;
}
/deep/textarea {
  width: 260px;
  height: 80px;
}
/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
